import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:high_help_apps/common/utils/functions.dart';
import 'package:high_help_apps/common/values/colors.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:high_help_apps/common/values/define.dart';
import 'package:high_help_apps/common/widgets/common/builder_grid_view.dart';
import 'package:high_help_apps/common/widgets/common/normal_divider.dart';
import 'commodity_detail_logic.dart';
import 'commodity_detail_state.dart';

class CommodityDetailPage extends StatefulWidget {
  @override
  _CommodityDetailPageState createState() => _CommodityDetailPageState();
}

class _CommodityDetailPageState extends State<CommodityDetailPage> {
  final CommodityDetailLogic logic = Get.put(CommodityDetailLogic());
  final CommodityDetailState state = Get.find<CommodityDetailLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.lightTextColor3,
      appBar: _buildCommodityDetailAppBar(),
      body: _buildIntroductionList(),
    );
  }

  List<Widget> _buildActions() => <Widget>[
        IconButton(
          onPressed: () {
            print('点击了更多');
          },
          icon: Icon(
            Icons.share,
            color: AppColors.userBarWhite,
          ),
        )
      ];

  PreferredSizeWidget _buildCommodityDetailAppBar() => AppBar(
        actions: _buildActions(),
        elevation: 0,
        title: Text(
          '商品详情',
          style: TextStyle(fontSize: 16.sp, color: AppColors.userBarWhite),
        ),
        centerTitle: true,
        iconTheme: IconThemeData(color: AppColors.userBarWhite),
      );

  Widget _buildIntroductionList() => Stack(
        children: [
          ListView(
            children: [_buildIntroductionBox()],
          ),
          _buildBottomLinkBox()
        ],
      );

  Widget _buildIntroductionBox() => GetBuilder<CommodityDetailLogic>(
      builder: (logic) => Container(
            margin: EdgeInsets.only(top: 10.h),
            padding: EdgeInsets.symmetric(vertical: 10.h),
            color: Colors.white70,
            child: logic.isInit == false
                ? Center(
                    child: CircularProgressIndicator(
                      color: AppColors.primaryElement,
                    ),
                  )
                : Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      _buildAvatarListTile(),
                      _buildPriceLine(),
                      _buildPictureGridView(),
                      _buildDescriptionArea(),
                    ],
                  ),
          ));

  Widget _buildAvatarListTile() => ListTile(
        leading: ClipOval(
          child: Image.network(
              "http://" + logic.state.commodityInfoRecords.user.avatar,
              fit: BoxFit.cover,
              height: 45.r,
              width: 45.r),
        ),
        title: Text(logic.state.commodityInfoRecords.title),
      );

  Widget _buildPriceLine() => Padding(
        padding: EdgeInsets.only(left: 15.w, top: 15.h, bottom: 10.h),
        child: Row(
          children: [
            Text(
              '￥${logic.state.commodityInfoRecords.currentPrice}',
              style: TextStyle(
                  color: Colors.red[300],
                  fontSize: 20.sp,
                  fontWeight: FontWeight.bold),
            ),
            SizedBox(
              width: 8.w,
            ),
            Text(
              '￥${logic.state.commodityInfoRecords.originalPrice}',
              style: TextStyle(
                  color: AppColors.lightTextColor1,
                  fontSize: 21.sp,
                  fontWeight: FontWeight.bold,
                  decoration: TextDecoration.lineThrough),
            )
          ],
        ),
      );

  Widget _buildDescriptionArea() => Padding(
        padding:
            EdgeInsets.only(left: 20.w, top: 15.h, right: 20.w, bottom: 10.h),
        child: Text(
          logic.state.commodityInfoRecords.desc,
          style: TextStyle(
            color: AppColors.lightTextColor,
            fontSize: 15.sp,
          ),
        ),
      );

  Widget _buildPictureGridView() => BuilderGridView(
        isShowTitle: false,
        length: logic.state.commodityInfoRecords.commodityImages.length,
        builder: (BuildContext context, int index) {
          return ExtendedImage.network(
            'http://' +
                logic.state.commodityInfoRecords.commodityImages[index].token,
            fit: BoxFit.cover,
            mode: ExtendedImageMode.none,
          );
        },
        crossCount: 3,
      );

  Widget _buildBottomLinkBox() => Positioned(
        child: GestureDetector(
            child: Container(
              height: 60.h,
              width: 1.0.sw,
              child: Column(
                children: [
                  NormalDivider(),
                  SizedBox(
                    height: 20.h,
                  ),
                  _buildBottomSliceGrid('联系商家')
                ],
              ),
            ),
            onTap: () => sTelephone(state.commodityInfoRecords.user.phone)),
        bottom: 0,
      );

  Widget _buildLineDivider() => SizedBox(
        width: 1,
        height: 60.h,
        child: DecoratedBox(
          decoration: BoxDecoration(color: Colors.grey[350]),
        ),
      );

  Widget _buildBottomSliceGrid(String title, {Icon? icon}) => Container(
        child: Center(
            child: icon == null
                ? Text(
                    title,
                    style: TextStyle(fontSize: 14.sp, color: Colors.grey),
                  )
                : Row(
                    children: [
                      icon,
                      SizedBox(
                        width: 5.w,
                      ),
                      Text(
                        title,
                        style: TextStyle(fontSize: 14.sp, color: Colors.grey),
                      )
                    ],
                  )),
      );

  @override
  void dispose() {
    Get.delete<CommodityDetailLogic>();
    super.dispose();
  }
}
